﻿@page "/component/common/image"

<Pager DataSource="Menu">
    <Body>
        <Header1 Divider>
            Image
            <SubHeader>An image is a graphic representation of something</SubHeader>
        </Header1>
<PresentationPart Title="Standard">
    <Description>
        Unless a size is specified, images will use the original dimensions of the image up to the size of its container.
    </Description>
    <RunTemplate>
        <Image Src="/img/image.png" Size="Size.Small"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Size=""Size.Small""/>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Image Link">
    <Description>
        An image can be formatted to link to other content
    </Description>
    <RunTemplate>
        <ImageAnchor href="http://www.bing.com" target="_blank" Size="Size.Small" title="To Bing">
            <Image Src="/img/image.png" />
        </ImageAnchor>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<ImageAnchor href=""http://www.bing.com"" target=""_blank"" Size=""Size.Small"" title=""To Bing"">
    <Image Src=""/img/image.png"" />
</ImageAnchor>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Avatar">
    <Description>
        An image may be formatted to appear inline with text as an avatar. <Text Color="Color.Blue">Recommend to use <code>Avatar</code> component instead.</Text>
    </Description>
    <RunTemplate>
        <Image Avatar Src="/img/image.png"/> Admin
        <Avatar Src="/img/image.png"/> User
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Avatar Src=""/img/image.png""/> Admin
<Avatar Src=""/img/image.png"" /> User
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Bordered">
    <Description>
        An image may include a border to emphasize the edges of white or transparent content
    </Description>
    <RunTemplate>
        <Image Src="/img/image.png" Bordered Size="Size.Small" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Bordered />
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Fluid">
    <Description>
        An image can take up the width of its container
    </Description>
    <RunTemplate>
        <Image Src="/img/image.png" Fluid/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Fluid/>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Rounded">
    <Description>
        An image may appear rounded
    </Description>
    <RunTemplate>
        <Image Src="/img/image.png" Rounded Size="Size.Small"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Rounded Size=""Size.Small""/>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Circular">
    <Description>
        An image may appear circular
    </Description>
    <RunTemplate>
        <Image Src="/img/image.png" Circular Size="Size.Small"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Circular Size=""Size.Small""/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Vertically Aligned">
            <Description>
                An image can specify its vertical alignment
            </Description>
            <RunTemplate>
                <Image Src="/img/image.png" Size="Size.Tiny" VerticalAlignment="VerticalAlignment.Top" />
                <span>Top Aligned</span>
                <Divider />
                <Image Src="/img/image.png" Size="Size.Tiny" VerticalAlignment="VerticalAlignment.Middle" />
                <span>Middle Aligned</span>
                <Divider />
                <Image Src="/img/image.png" Size="Size.Tiny" VerticalAlignment="VerticalAlignment.Bottom" />
                <span>Bottom Aligned</span>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Size=""Size.Tiny"" VerticalAlignment=""VerticalAlignment.Top"" />
<span>Top Aligned</span>
<Divider />
<Image Src=""/img/image.png"" Size=""Size.Tiny"" VerticalAlignment=""VerticalAlignment.Middle"" />
<span>Middle Aligned</span>
<Divider />
<Image Src=""/img/image.png"" Size=""Size.Tiny"" VerticalAlignment=""VerticalAlignment.Bottom"" />
<span>Bottom Aligned</span>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Centered">
            <Description>
                An image can appear centered in a content block
            </Description>
            <RunTemplate>
                <Segment>
                    <Image Src="/img/image.png" Size="Size.Medium" Centered />
                    <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
                    <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

                    <Image Src="/img/image.png" Size="Size.Tiny" Centered />
                    <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment>
    <Image Src=""/img/image.png"" Size=""Size.Medium"" Centered />
    <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
    <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

    <Image Src=""/img/image.png"" Size=""Size.Tiny"" Centered />
    <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Spaced">
            <Description>
                An image can specify that it needs an additional spacing to separate it from nearby content
            </Description>
            <RunTemplate>
                <Segment>
                    <p>Te eum doming eirmod, nominati pertinacia <Image Src="/img/image.png" Size="Size.Mini" Spaced/> argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment>
    <p>Te eum doming eirmod, nominati pertinacia <Image Src=""/img/image.png"" Size=""Size.Mini"" Spaced/> argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Floated">
            <Description>An image can sit to the left or right of other content</Description>
            <RunTemplate>
                <Segment>
                    <Image Src="/img/image.png" Size="Size.Tiny" Floated="HorizontalPosition.Left" />
                    <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>

                    <Image Src="/img/image.png" Size="Size.Tiny" Floated="HorizontalPosition.Right" />
                    <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
                    <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment>
    <Image Src=""/img/image.png"" Size=""Size.Tiny"" Floated=""HorizontalPosition.Left"" />
    <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>

    <Image Src=""/img/image.png"" Size=""Size.Tiny"" Floated=""HorizontalPosition.Right"" />
    <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
    <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
<PresentationPart Title="Size">
    <Description>
        An image may appear at different sizes
    </Description>
    <RunTemplate>

        <table class="ui definition table">
            <tbody>
                <tr>
                    <td width="30px">Mini</td>
                    <td width="50px">35px</td>
                    <td><Image Src="/img/image.png" Size="Size.Mini" /></td>
                </tr>
                <tr>
                    <td>Tiny</td>
                    <td>80px</td>
                    <td><Image Src="/img/image.png" Size="Size.Tiny" /></td>
                </tr>
                <tr>
                    <td>Small</td>
                    <td>150px</td>
                    <td><Image Src="/img/image.png" Size="Size.Small" /></td>
                </tr>
                <tr>
                    <td>Medium</td>
                    <td>300px</td>
                    <td><Image Src="/img/image.png" Size="Size.Medium" /></td>
                </tr>
                <tr>
                    <td>Large</td>
                    <td>450px</td>
                    <td><Image Src="/img/image.png" Size="Size.Large" /></td>
                </tr>
                <tr>
                    <td>Big</td>
                    <td>600px</td>
                    <td><Image Src="/img/image.png" Size="Size.Big" /></td>
                </tr>
                <tr>
                    <td>Huge</td>
                    <td>800px</td>
                    <td><Image Src="/img/image.png" Size="Size.Huge" /></td>
                </tr>
                <tr>
                    <td>Massive</td>
                    <td>960px</td>
                    <td><Image Src="/img/image.png" Size="Size.Massive" /></td>
                </tr>
            </tbody>
        </table>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Image Src=""/img/image.png"" Size=""Size.Mini""/>
<Image Src=""/img/image.png"" Size=""Size.Tiny""/>
<Image Src=""/img/image.png"" Size=""Size.Small""/>
<Image Src=""/img/image.png"" Size=""Size.Medium"" />
<Image Src=""/img/image.png"" Size=""Size.Large"" />
<Image Src=""/img/image.png"" Size=""Size.Big"" />
<Image Src=""/img/image.png"" Size=""Size.Huge"" />
<Image Src=""/img/image.png"" Size=""Size.Massive"" />
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Groups">
    <Description>
        A group of images can be formatted to have the same size.
    </Description>
    <RunTemplate>
        <ImageGroup Size="Size.Tiny">
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
        </ImageGroup>

        <ImageGroup Size="Size.Small">
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
            <Image Src="/img/image.png" />
        </ImageGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<ImageGroup Size=""Size.Tiny"">
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
</ImageGroup>
<ImageGroup Size=""Size.Small"">
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
    <Image Src=""/img/image.png"" />
</ImageGroup>
```
")
    </CodeTemplate>
</PresentationPart>        
    </Body>
</Pager>

@code{ 
    List<string> Menu = new List<string>(new[]
    {
        "Standard","Image Link","Avatar","Bordered","Fluid","Rounded","Circular","Vertically Aligned","Centered","Spaced","Floated","Size","Groups"
    });
}